<template>
    <div class="body">
        <my-card title="工作量统计">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="">
                    <el-date-picker v-model="formInline.starttime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                                    placeholder="开始时间" clearable></el-date-picker>
                </el-form-item>
                <el-form-item label="">
                    <el-date-picker v-model="formInline.endtime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                                    placeholder="结束时间" clearable></el-date-picker>
                </el-form-item>
                <el-form-item label="">
                    <dept-select-tree v-model="formInline.dept_id " :style="{width: '220px'}"></dept-select-tree>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="initData">查询</el-button>
                </el-form-item>
            </el-form>
            <el-row :gutter="20">
<!--                <el-col :span="8">-->
<!--                    <block-item icon="agreement" class="BGLG_ff9e1c">-->
<!--                        <template slot="num">{{info.c1|formatmoney}}<span style="font-size: 12px">条</span></template>-->
<!--                        <template slot="desc">校内呈签</template>-->
<!--                    </block-item>-->
<!--                </el-col>-->
                <el-col :span="12">
                    <block-item icon="file-focus" class="BGLG_40c9eb">
                        <template slot="num">{{info.c2|formatmoney}}<span style="font-size: 12px">条</span></template>
                        <template slot="desc">学校收文</template>
                    </block-item>
                </el-col>
                <el-col :span="12">
                    <block-item icon="file-protection" class="BGLG_fd7f4f">
                        <template slot="num">{{info.c3|formatmoney}}<span style="font-size: 12px">条</span></template>
                        <template slot="desc">学校发文</template>
                    </block-item>
                </el-col>
            </el-row>
        </my-card>
        <my-card title="学校发文数量统计（TOP15）">
            <base-echart id="home-echart1" ref="echart1" :option="option()"
                         height="320px" key="1" v-if="info.dept"></base-echart>
        </my-card>
    </div>
</template>
<script>
    import MyCard from "@/components/Common/MyCard";
    import DeptSelectTree from "@/components/Common/DeptSelectTree";
    import BlockItem from "@/components/Common/BlockItem";
    import BaseEchart from "@/components/Common/BaseEchart";
    import documentsStatistics from "@/api/officialDocument/documentsStatistics/index";
    import {formatmoney} from "@/utils/currency"
    export default {
        components: {BaseEchart, BlockItem, DeptSelectTree, MyCard},
        filters:{
            formatmoney
        },
        data() {
            return {
                formInline: {
                    starttime: undefined,
                    endtime: undefined,
                    dept_id: undefined,
                },
                info:{}
            }
        },
        created() {
            this.initData()
        },
        methods: {
            initData(){
                documentsStatistics.getDocumentStatistics(this.formInline).then(res=>{
                    this.info = res.data
                    if(this.$refs["echart1"]){
                        this.$refs["echart1"].initCharts()
                    }
                })
            },
            option(){
                return {
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        show: false,
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            // prettier-ignore
                            data: this.info.dept.name
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '公文数',
                            type: 'bar',
                            data: this.info.dept.count,
                            markPoint: {
                                data: [
                                    {type: 'max', name: 'Max'},
                                    {type: 'min', name: 'Min'}
                                ],
                                label: {
                                    color: "#ffffff"
                                }
                            },
                            markLine: {
                                data: [{type: 'average', name: 'Avg'}],
                            },
                            itemStyle: {
                                color: '#73dfd8',
                            },
                        },
                    ],
                };
            }
        }
    }
</script>
<style lang="scss" scoped>
    .body {
        margin: 15px 20px 20px;
        margin-bottom: 0px;
    }

    .el-card {
        margin-top: 15px;
    }

    .BGLG_ff9e1c {
        background: linear-gradient(116deg, #25c3de, #66dae9);
    }

    .BGLG_fd7f4f {
        background: linear-gradient(116deg, #fd9669, #fec1a2);
    }

    .BGLG_40c9eb {
        background: linear-gradient(116deg, #40c9eb, #1791de);
    }
</style>
